<template>
  <div id="indexPage">
    <div id="app-in">
      <span id="bigTitle">Vue-z简单易用的集成ui框架</span>
    </div>
    <el-row :gutter="20" style="height: calc(100vh - 83px);margin-right:-8px;">
      <el-col :span="menuSpan" style="height:100%;">
        <div style="width: 50px;height:50px" @click="isOpen">
          <span class="iconfont icon-zhankai"></span>
        </div>
        <el-menu
          style="width: 100%;"
          :collapse="isCollapse"
          default-active="1-4-1"
          class="el-menu-vertical-demo"
        >
          <zMenu :menus="menus"></zMenu>
        </el-menu>
      </el-col>
      <el-col :span="contentSpan" id="content">
        <router-view />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import zMenu from '@/components/zMenuPlugin'
import menuOpt from '@/assets/data/menu.json'
import '@/assets/font/a-li-icon/iconfont.css'
export default {
  name: 'index',
  components: { zMenu },
  data() {
    return {
      isCollapse: true,
      openCloseSty: 'expandSty',
      menus: [],
      menuSpan: 1,
      contentSpan: 23
    }
  },
  mounted() {
    this.menus = menuOpt.menuOption
  },
  methods: {
    isOpen() {
      if (this.openCloseSty === 'retractSty') {
        this.isCollapse = true
        this.openCloseSty = 'expandSty'
        this.menuSpan = 1
        this.contentSpan = 23
      } else {
        this.isCollapse = false
        this.openCloseSty = 'retractSty'
        this.menuSpan = 3
        this.contentSpan = 21
      }
    },
    handleSelect(obj) {
      console.log(obj.key)
      console.log(obj.path)
      this.$router
        .push({
          path: '/' + obj.key
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style>
#indexPage {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#app-in {
  background: #2c3e50;
}
#bigTitle {
  font-size: 50px;
  color: aliceblue;
}
#content {
  margin-top: 20px;
}
.el-submenu .el-menu-item {
  min-width: 100px;
}
</style>
